<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id='app'>
        <el-row :gutter="20">
            <el-col :span="12" v-for='item in items'>
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
    </div>
    </el-col>
    </el-row>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
    <script src="/story/utils.js"></script>
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                keyword: '${keyword!""}',
                items: JSON.parse('${items!"[]"}')
            }
        },
        mounted: function() {
            // var str = '${items!}'

        },
        methods: {
            onDelete(name) {
                var param = {
                    name: name
                }
                axiosRequest(param, '/story/delete', "")
            },
        },
        filters: {
            fmt(date) {
                return date
            }
        }
    })
    </script>
    <script>
    console.log('${items!}')
    // vue.tableData = ${items!};
    </script>
</body>

</html>